<template>
	<view class="e-detail">
		<view class="bg-fff p-30 br-10 m-b-20">
			<view class="j-between">
				<view class="title">{{form.realName}}-{{getType}}</view>
				<view class="wrong" :class="[statusName=='待处理'?'':'pass']">{{statusName}}</view>
			</view>
			<u-divider></u-divider>
			<store-table :titleList="titleList" :dataList="dataList"></store-table>
		</view>
		<view class="bg-fff p-30 br-10">
			<view v-for="(item, index) in infoList" :key="index">
				<u-line v-if="index!=0" lineColor="#f7f8fa"></u-line>
				<u-row customStyle="padding: 20rpx 10rpx;color: #333;font-size: 26rpx;">
					<u-col span="3">
						{{item.name}}
					</u-col>
					<u-col span="9">
						{{form[item.key]}}
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="j-between window-bottom" v-if="statusName=='待处理'">
			<u-button type="primary" :plain="true" text="驳回" :customStyle="{marginRight: '20rpx'}"
				@click="onConsent(false)"></u-button>
			<u-button type="primary" text="通过" @click="onConsent(true)"></u-button>
		</view>
		<u-modal :show="show" @confirm="onConfirm" @cancel="onCancel" ref="uModal" :showCancelButton="true">
			<u--form labelPosition="top" :model="auditForm" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item :label="'驳回理由'" prop="comment" ref="item1" v-if="!auditForm.pass">
					<u--textarea v-model="auditForm.comment" placeholder="请输入内容" :confirmType="null"
						:showConfirmBar='false'></u--textarea>
				</u-form-item>
				<view v-else>确认通过？通过后将无法撤回</view>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				titleList: [{
						name: '器具名称',
						span: '7',
					},
					{
						name: '准确度',
						span: '5',
					},
				],
				dataList: [],
				listModule: [{
						value: '直流高压发生器（rawe）',
						key: 'name'
					},
					{
						value: '0-100kv',
						key: 'modelNumber'
					},
				],
				contentModule: [{
						label: '申请仪器',
						key: 'name'
					},
					{
						label: '型号规模',
						key: 'modelNumber'
					},
					{
						label: '准确度',
						key: 'devicePrecision'
					},
					{
						label: '制造厂商',
						key: 'manufacturer'
					},
					{
						label: '出厂编号',
						key: 'factoryNumber'
					},
				],
				infoList: [{
						name: '申请人',
						key: 'realName'
					},
					{
						name: '联系方式',
						key: 'mobile'
					},
					{
						name: '申请日期',
						key: 'applicantOutDate'
					},
				],
				form: {},
				statusName: '',
				type: '',
				auditForm: {
					taskId: '',
					comment: '',
					pass: true
				},
				rules: {
					comment: {
						type: 'string',
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(options) {
			this.statusName = options.statusName
			this.type = options.type
			this.auditForm.taskId = options.taskId
			this.getDetail(options.id)
		},
		computed: {
			getType() {
				if (this.type == '出库申请') {
					return '出库审核'
				} else if (this.type == '外借申请') {
					return '外借审核'
				}
				return '入库审核'
			}
		},
		methods: {
			// 获取详情
			getDetail(id) {
				this.dataList = []
				this.$api.getWarehouseDetail({
					id: id
				}).then(res => {
					this.form = res.data
					this.form.realName = this.form.applicantUser.realName
					this.form.mobile = this.form.applicantUser.mobile
					let list = []
					let content = []
					res.data.instrumentsDTOs.map((res, index) => {
						list = this.listModule.map(data => {
							data.value = res[data.key]
							return data
						})
						content = this.contentModule.map(data => {
							data.value = res[data.key]
							return data
						})
						this.dataList.push({
							list,
							content
						})
					})
				})
			},
			// 审核通过
			onConsent(pass) {
				this.show = true
				this.auditForm.pass = pass
				if (!pass) {
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules)
					})
				}
			},
			async onConfirm() {
				let apiName = 'onBack'
				if (this.auditForm.pass) {
					apiName = 'onPass'
				}
				this.$refs.uForm.validate().then(res => {
					this.$api[apiName](this.auditForm).then(res => {
						if (res.msg == 'success') {
							uni.showToast({
								title: '审核成功',
							})
							this.onCancel()
							uni.navigateBack()
						}
					})
				}).catch(errors => {})
			},
			onCancel() {
				this.show = false
				this.$refs.uForm.resetFields()
				this.auditForm.comment = ''
			},
		}
	}
</script>

<style lang="scss">
	$wrongColor: #F4AD23;
	$normalColor: #0e64fe;

	.e-detail {
		padding: 30rpx;
		background: linear-gradient(#0e64fe, #F7F8FA); //从上到下

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.u-col {
			:first-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #59606A;
			}

			:last-child {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.wrong {
		font-size: 24rpx;
		background-color: rgba(244, 173, 35, 0.1);
		color: $wrongColor;
		padding: 10rpx;
		border-radius: 5rpx;
	}

	.pass {
		background-color: rgba(14, 100, 254, 0.1);
		color: $normalColor;
	}

	.u-page__item__title__slot-title {
		font-size: 22rpx;
		color: #333333;
	}

	.detail-item {
		font-size: 26rpx;
		color: #909091;
		padding: 5rpx 0;
		display: flex;

		:first-child {
			width: 150rpx
		}
	}

	::v-deep .u-modal__content {
		flex-direction: column;
	}
</style>